<!--<template>
  <div class="chat_container" style="height: 100%">
    <div
        style="
        height: 100%;
        width: 100%;
        background-color: red;

      "
    >
      <el-row style="height: 100%">
        <el-col :span="5" style="background-color: grey; height: inherit">
          <div>
            &lt;!&ndash;<div style="position: relative; top: 10px; left: 20px; width: 90%">&ndash;&gt;
            &lt;!&ndash;<el-input class="search_input" placeholder="搜索"></el-input>&ndash;&gt;
            &lt;!&ndash;</div>&ndash;&gt;
            <el-row style="height: 60px;background-color:rgb(240, 197, 168);border: 1px solid #eee"
                    v-for="item in friendList" key="item.username">
              <el-col :span="6">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="35"
                           style="margin: 10px 30px">

                </el-avatar>
              </el-col>
              <el-col :span="18">
                <el-row>
                  <el-col :span="14">
                    <div style="margin:10px 0px 5px 0px">{{ item.username }}</div>
                    <div class="ellipsis">{{ item.text }}</div>
                  </el-col>
                  <el-col :span="10">
                    <div style="font-size: 10px;margin:10px 0px">
                      {{ item.date }}
                    </div>
                  </el-col>
                </el-row>
              </el-col>

            </el-row>
          </div>
        </el-col>
        <el-col :span="19" style="background-color: blue; height: inherit">
          <div style="background-color: yellowgreen; height: 600px;">
            <el-row style="height: 60px;background-color:red;display: flex;align-items: center;">
              <el-row style="margin-left: 20px;color:rgb(88, 88, 88);font-size:24px">
                王二离
              </el-row>
            </el-row>
            <el-row>
              <el-row
                  v-for="message in messages"
                  :key="message.id"
                  :class="{'left-message': message.role === 'user', 'right-message': message.role === 'me'}"
              >
                &lt;!&ndash;用户或者对方的单行消息包括头像和消息&ndash;&gt;
                <el-row style="float:left;">
                  <div style="display: flex; align-items: center;">
                    <el-avatar v-if="message.role === 'user'"
                               src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                               :size="35"></el-avatar>
                    <p :class="{'message-backgroudcolor':true,'left-message-content':message.role==='user','right-message-content':message.role ==='me'}" v-if="message.role === 'user'"> {{ message.content }}</p>
                  </div>
                </el-row>

                <el-row style="float: right;margin-top:10px">
                  <div style="display: flex; align-items: center;">
                    <span :class="{'message-backgroudcolor':true,'left-message-content':message.role==='user','right-message-content':message.role ==='me'}" v-if="message.role === 'me'"> {{ message.content }}</span>
                    <el-avatar v-if="message.role === 'me'"
                               src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                               :size="35"></el-avatar>
                  </div>


                </el-row>
              </el-row>
            </el-row>
          </div>
          &lt;!&ndash;聊天框区域&ndash;&gt;
          <el-row style="background-color:purple; height: 150px;box-sizing: border-box">
            <el-row style="height: 30px;background-color:red;display: flex; align-items: center;">
              <div style="margin-left: 20px">
                <span>表情</span>
                <span style="margin-left: 20px">文件</span>
              </div>

            </el-row>
            <el-row style="height: 200px">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 5}"
              >
              </el-input>
            </el-row>
          </el-row>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//引入socket对象
import {socket} from "@/components/Utils/websocket";

export default {
  data() {
    return {
      loading: true,
      websocketCount: -1,
      //查询条件
      queryCondition: {
        "toId": 2,
        "text": "你好",
        "chatType": 1,
        "isAdmin": false
      },
      messages: [
        {
          id: 1, content: "你好23222222222222222222222222222哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈222222222222222222222222222222222222222222222222222222222222222222", role: "user",
        },
        {
          id: 2, content: "你好红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈哈", role: "me",
        },
        {
          id: 3, content: "你好23222222222222222222222222222哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈222222222222222222222222222222222222222222222222222222222222222222", role: "user",
        },
        {
          id: 4, content: "你好", role: "me",
        },
      ],
      friendList: [
        {
          username: "王二离",
          text: "最后一条聊天记录：你好",
          date: "2024年3月1日"
        },
        {
          username: "礼喆",
          text: "最后一条聊天记录：你好",
          date: "2024年12月24日"
        },

      ],
    };
  },
  created() {
    //初始化websocket对象
    //window.location.host获取ip和端口，
    //process.env.VUE_APP_WEBSOCKET_BASE_API获取请求前缀
    // socket.initWebSocket(`ws://localhost:8889/api/websocket/` + 1923);
    //绑定接收消息方法
    // socket.websocket.onmessage = this.websocketOnMessage;
  },
  methods: {
    backgroundColor() {
      return backgroundColor
    },
    init() {
      this.queryCondition.type = "message";
      socket.sendMsg(JSON.stringify(this.queryCondition));
    },
    websocketOnMessage(event) {
      //初始化界面时，主动向后台发送一次消息，获取数据
      this.websocketCount += 1;
      if (this.websocketCount === 0) {
        this.init();
      }
      let info = event.data;
      this.messages.push(info);
      switch (info.type) {
        case "PONG":
          socket.websocketState = true;
          break;
        case "message":
          this.loading = true;
          this.$nextTick(() => {
            this.consumeMessage(info);
          });
          break;
        case "error":
          console.log("错误");
          this.loading = false;
          break;
      }
    },
    consumeMessage(info) {
      //拿到最新数据重新渲染界面
      console.log(info);
    },
  },
};
</script>
<style lang="less" scoped>
.chat_container {
}

.ellipsis {
  font-size: 12px;
  color: rgb(127, 76, 69);
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  width: 100px; /* 设置元素宽度 */
}

.left-message {
  text-align: left;
  margin-left: 10px;
  margin-right:10px;
  margin-top: 10px;
}

.right-message {
  text-align: right;
  margin-right: 10px;
  margin-left: 10px;
}
.message-backgroudcolor {
  background-color: #e7f7ff;
  border-radius: 5px;
}
.left-message-content {
  margin-left: 10px;
}
.right-message-content {
  margin-right:10px;
}
</style>-->
<!--<template>
  <div class="chat_container">
    <el-row class="main-container" style="height: 100%">
      &lt;!&ndash; 左侧好友列表 &ndash;&gt;
      <el-col :span="5" class="sidebar">
        <div v-for="item in friendList" :key="item.username" class="friend-item">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="40" />
          <div class="friend-info">
            <div class="friend-name">{{ item.username }}</div>
            <div class="friend-last-message ellipsis">{{ item.text }}</div>
          </div>
          <div class="friend-date">{{ item.date }}</div>
        </div>
      </el-col>

      &lt;!&ndash; 右侧聊天区域 &ndash;&gt;
      <el-col :span="19" class="chat-area">
        <div class="chat-header">王二离</div>

        &lt;!&ndash; 消息展示区 &ndash;&gt;
        <div class="messages-container">
          <div v-for="message in messages" :key="message.id" :class="message.role === 'user' ? 'message-left' : 'message-right'">
            <el-avatar v-if="message.role === 'user'" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="35" />
            <div class="message-content">{{ message.content }}</div>
            <el-avatar v-if="message.role === 'me'" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="35" />
          </div>
        </div>

        &lt;!&ndash; 输入框 &ndash;&gt;
        <div class="input-area">
          <div class="toolbar">
            <el-icon><i class="el-icon-smile"></i></el-icon>
            <el-icon><i class="el-icon-document"></i></el-icon>
          </div>
          <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 3 }"
              placeholder="输入消息..."
              class="message-input"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { socket } from "@/components/Utils/websocket";

export default {
  data() {
    return {
      loading: true,
      websocketCount: -1,
      queryCondition: { toId: 2, text: "你好", chatType: 1, isAdmin: false },
      messages: [
        { id: 1, content: "你好，这是一条测试消息。", role: "user" },
        { id: 2, content: "这是我的回复消息。", role: "me" },
        { id: 3, content: "还有更多消息在这里。", role: "user" },
      ],
      friendList: [
        { username: "王二离", text: "最后一条消息内容", date: "2024-03-01" },
        { username: "礼喆", text: "另一个好友的消息内容", date: "2024-12-24" },
      ],
    };
  },
  created() {
    // 初始化websocket
  },
  methods: {
    init() {
      this.queryCondition.type = "message";
      socket.sendMsg(JSON.stringify(this.queryCondition));
    },
    websocketOnMessage(event) {
      this.websocketCount += 1;
      if (this.websocketCount === 0) {
        this.init();
      }
      const info = JSON.parse(event.data);
      this.messages.push(info);
      if (info.type === "error") {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.chat_container {
  height: 100%;
  background-color: #f9f9f9;
}

.main-container {
  height: 100%;
}

.sidebar {
  background-color: #f2f2f2;
  padding: 10px;
  .friend-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    .friend-info {
      margin-left: 10px;
      .friend-name {
        font-weight: bold;
        font-size: 14px;
      }
      .friend-last-message {
        font-size: 12px;
        color: #888;
      }
    }
    .friend-date {
      font-size: 10px;
      color: #aaa;
      margin-left: auto;
    }
  }
}

.chat-area {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .chat-header {
    padding: 10px;
    background-color: #4a90e2;
    color: white;
    font-size: 18px;
  }
  .messages-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f0f4f8;
    .message-left, .message-right {
      display: flex;
      align-items: center;
      margin: 5px 0;
      .message-content {
        padding: 10px 15px;
        border-radius: 15px;
        max-width: 60%;
        background-color: #e7f7ff;
      }
    }
    .message-left .message-content {
      margin-left: 10px;
      background-color: #d0eaff;
    }
    .message-right {
      justify-content: flex-end;
      .message-content {
        background-color: #d4edda;
        margin-right: 10px;
      }
    }
  }
  .input-area {
    padding: 10px;
    background-color: #f9f9f9;
    .toolbar {
      display: flex;
      align-items: center;
      color: #888;
      padding-bottom: 5px;
      el-icon {
        font-size: 18px;
        cursor: pointer;
        margin-right: 10px;
      }
    }
    .message-input {
      width: 100%;
      border-radius: 8px;
    }
  }
}
</style>-->
<template>
  <div class="chat_container">
    <div class="chat-wrapper">
      <!-- 左侧好友列表 -->
      <el-row class="friend-list">
        <el-col :span="5" class="friend-list-col">
          <div>
            <el-row
                v-for="item in friendList"
                :key="item.username"
                class="friend-item"
                @click="selectFriend(item)"
            >
              <el-col :span="6">
                <el-avatar
                    src="https://dkd-ynga.oss-cn-hangzhou.aliyuncs.com/Rlib.png"
                    :size="30"
                    class="friend-avatar"
                />
              </el-col>
              <el-col :span="18" class="friend-info">
                <div class="friend-name">{{ item.username }}</div>
                <div class="friend-message ellipsis">{{ item.text }}</div>
                <div class="friend-date">{{ item.date }}</div>
              </el-col>
            </el-row>
          </div>
        </el-col>

        <!-- 右侧聊天区域 -->
        <el-col :span="19" class="chat-col">
          <div class="chat-header">
            <el-row class="chat-header-row">
              <!--<div class="chat-header-name">王二离</div>-->
              <div class="chat-header-name">{{ currentFriend || "请选择好友" }}</div>
            </el-row>
          </div>

          <div class="message-container">
            <el-row
                v-for="message in messages"
                :key="message.id"
                :class="{'left-message': message.role === 'user', 'right-message': message.role === 'me'}"
            >
              <!-- 用户消息 -->
              <el-row class="message-row left">
                <el-avatar v-if="message.role === 'user'" src="https://dkd-ynga.oss-cn-hangzhou.aliyuncs.com/Rlib.png" :size="35" class="message-avatar" />
                <p v-if="message.role === 'user'" class="message-content user">{{ message.content }}</p>
              </el-row>

              <!-- 当前用户消息 -->
              <el-row class="message-row right">
                <p v-if="message.role === 'me'" class="message-content me">{{ message.content }}</p>
                <el-avatar v-if="message.role === 'me'" src="https://dkd-ynga.oss-cn-hangzhou.aliyuncs.com/Rlib.png" :size="35" class="message-avatar" />
              </el-row>
            </el-row>
          </div>

          <!-- 输入框和功能按钮 -->
          <div class="input-section">

            <el-row class="input-header">
              <div class="input-options">
                <el-popover  placement="top-start" width="400" trigger="click" class="emoBox">
                  <div class="emotionList">
                    <a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in emojis" :key="index" class="emotionItem">{{item}}</a>
                  </div>
                  <el-button id="emojiBtn" class="emotionSelect" slot="reference">
                    <i class="fa fa-smile-o" aria-hidden="true"></i>
                  </el-button>
                </el-popover>
                <el-upload
                    class="upload-btn"
                    action=""
                    :before-upload="beforeAvatarUpload"
                    :on-success="imgSuccess"
                    :on-error="imgError"
                    :show-file-list="false"
                    accept=".jpg,.jpeg,.png,.JPG,JPEG,.PNG,.gif,.GIF"
                >
                  <el-button id="uploadImgBtn" icon="el-icon-picture-outline"></el-button>
                </el-upload>
                <!--<span @click="toggleEmojiPicker" style="cursor: pointer;">😊</span> &lt;!&ndash; 切换表情包面板 &ndash;&gt;-->
                <!--<span class="file-option" @click="handleFileSelect">📁</span>--> <!-- 文件上传按钮 -->
              </div>
            </el-row>
            <el-row class="input-row">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 30 }"
                  placeholder="请输入消息..."
                  v-model="messageText"
                  @keyup.enter.native="sendMessage"
                  class="chat-input"
              />
            </el-row>
            <el-row class="send-button-row">
              <el-button
                  type="primary"
                  size="small"
                  @click="sendMessage"
                  :disabled="!messageText.trim()"
              >发送(S)</el-button>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

const appData=require("../Utils/emoji-plus.json")//引入存放emoji表情的json文件

export default {
  data() {
    return {
      loading: true,
      websocketCount: -1,
      queryCondition: {
        toId: 2,
        text: "你好",
        chatType: 1,
        isAdmin: false,
      },
      messageText: "", // 输入框的消息内容
      currentFriend: "王二离", // 当前选中的好友
      emojiDialogVisible: false, // 控制表情包弹窗显示与隐藏
      fileDialogVisible: false, // 控制文件上传弹窗显示与隐藏
      emojis: [], // 表情包列表
      file: null, // 存储用户选择的文件
      messages: [
        {
          id: 1,
          content: "你好！这个是聊天内容测试，看看如何显示。",
          role: "user",
        },
        {
          id: 2,
          content: "你好！这是我回复的内容，看看如何展示。",
          role: "me",
        },
        {
          id: 1,
          content: "你好！这个是聊天内容测试，看看如何显示。",
          role: "user",
        },
        // 更多消息...
      ],
      friendList: [
        {
          username: "王二离",
          text: "最后一条聊天记录：你好",
          date: "2024-3-1",
        },
        {
          username: "礼喆",
          text: "最后一条聊天记录：你好",
          date: "2024-12-24",
        },
        {
          username: "李华",
          text: "最后一条聊天记录：你好",
          date: "2024-3-1",
        },

      ],
    };
  },
  methods: {
    init() {
      this.queryCondition.type = "message";
      socket.sendMsg(JSON.stringify(this.queryCondition));
      // 发送后重置输入框
      this.messageText = '';
      this.file = null;
    },
    websocketOnMessage(event) {
      this.websocketCount += 1;
      if (this.websocketCount === 0) {
        this.init();
      }
      let info = event.data;
      this.messages.push(info);
      switch (info.type) {
        case "PONG":
          socket.websocketState = true;
          break;
        case "message":
          this.loading = true;
          this.$nextTick(() => {
            this.consumeMessage(info);
          });
          break;
        case "error":
          console.log("错误");
          this.loading = false;
          break;
      }
    },
    consumeMessage(info) {
      console.log(info);
    },
    sendMessage() {
      if (this.messageText.trim()) {
        // 发送消息的逻辑
        console.log('发送的消息:', this.messageText);
        // 清空输入框
        this.messageText = '';
      }
    },
    /**
     * 图片上传的方法
     */
    //上传前
    beforeAvatarUpload(file) {
      //判断图片大小
      let isLt1M = file.size / 1024 / 1024 < 1;
      console.log(file)
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      //判断图片的格式
      let imgType=file.name.substring(file.name.lastIndexOf(".")+1);
      imgType=imgType.toLowerCase();
      let isImg=imgType==='jpg'|| imgType==='png'|| imgType==='jpeg'||imgType==='gif';
      if (!isImg){
        this.$message.error('上传图片格式不符合要求！');
      }
      return isLt1M&&isImg;
    },
    // 图片上传成功
    imgSuccess(response, file, fileList) {
      console.log("图片url为："+response);
      let msgObj=new Object();
      msgObj.messageText=response;
      //设置消息类型为图片
    },
    // 图片上传失败
    imgError(err, file, fileList){
      this.$message.error("上传失败");
    },
    //获取Emoji
    getEmo(index){
      console.log('表情被点击:', this.emojis[index]); // 输出当前点击的表情字符
      var textArea=document.getElementById('textarea');
      //将选中的表情插入到输入文本的光标之后
      function changeSelectedText(obj, str) {
        if (window.getSelection) {
          // 非IE浏览器
          textArea.setRangeText(str);
          // 在未选中文本的情况下，重新设置光标位置
          textArea.selectionStart += str.length;
          textArea.focus()
        } else if (document.selection) {
          // IE浏览器
          obj.focus();
          var sel = document.selection.createRange();
          sel.text = str;
        }
      }
      changeSelectedText(textArea,this.faceList[index]);
      this.content=textArea.value;// 要同步data中的数据
      // console.log(this.faceList[index]);
      return;
    },
    // 插入表情
    insertEmoji(textArea, emoji) {
      // 获取光标位置
      const cursorPos = textArea.selectionStart;
      // 获取光标前后的文本内容
      const textBefore = textArea.value.slice(0, cursorPos);
      const textAfter = textArea.value.slice(cursorPos);
      // 更新文本框内容
      textArea.value = textBefore + emoji + textAfter;
      // 更新 messageText，确保双向绑定同步
      this.messageText = textArea.value;
      // 设置光标位置到插入表情的后面
      textArea.selectionStart = textArea.selectionEnd = cursorPos + emoji.length;
      // 聚焦输入框
      textArea.focus();
    },
    // 文件上传成功的处理
    handleFileSuccess(response, file) {
      console.log("文件上传成功", response, file);
      // 这里可以获取上传后的文件 URL，并将其发送到聊天窗口
    },
  },
  mounted() {
    // this.loadEmojis(); // 加载表情包
    for (let i in appData){//读取json文件保存数据给数组
      this.emojis.push(appData[i].char);
    }
  },
};
</script>

<style lang="less" scoped>
/*.chat_container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  height: 85vh;
}

.chat-wrapper {
  display: flex;
  width: 80%;
  height: 80%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.friend-list-col {
  background-color: #f4f4f4;
  padding: 20px;
  border-right: 1px solid #ddd;
}

.friend-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.friend-avatar {
  border-radius: 50%;
}

.friend-info {
  margin-left: 10px;
  flex: 1;
}

.friend-name {
  font-weight: bold;
}

.friend-message {
  font-size: 12px;
  color: #777;
}

.friend-date {
  font-size: 10px;
  color: #bbb;
}

.chat-col {
  background-color: #fff;
  padding: 20px;
  flex: 1;
}

.chat-header {
  background-color: #e88a00;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.chat-header-row {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #333;
}

.message-container {
  max-height: 500px;
  height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.message-row {
  display: flex;
  margin-bottom: 10px;
}

.message-avatar {
  border-radius: 50%;
  margin: 0 10px;
}

.message-content {
  padding: 10px;
  border-radius: 12px;
  max-width: 75%;
  word-wrap: break-word;
  display: inline-block;
}

.user {
  background-color: #e0f7fa;
}

.me {
  background-color: #c8e6c9;
  margin-left: auto;
}

.input-section {
  background-color: #f9f9f9;
  padding: 0px 15px;
  border-top: 1px solid #ddd;
}

.input-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 20px;
}

.input-options {
  color: #888;
}

.file-option {
  cursor: pointer;
  margin-left: 15px;
}

.input-row {
  padding: 0 20px;
}

.chat-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
}*/
.chat-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  padding: 20px;
  height: 100vh;
}

.chat-wrapper {
  width: 100%;
  height: 100%;
}

.el-popover{
  height:200px;
  width:450px;
  overflow: scroll;
  overflow-x:auto;
}

.friend-list-col {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow-y: auto;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 8px;
}

.friend-item:hover {
  background-color: #f2f2f2;
}

.friend-avatar {
  margin-right: 12px;
}

.friend-info {
  flex-grow: 1;
}

.friend-name {
  font-weight: bold;
}

.friend-message {
  color: #888;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-date {
  font-size: 12px;
  color: #ccc;
}

.chat-col {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chat-header {
  padding-bottom: 20px;
}

.chat-header-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.message-container {
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

.message-row {
  display: flex;
  align-items: center;
  //align-items: flex-end;
  margin-bottom: 12px;
}

.left-message {
  justify-content: flex-start;
}

.right-message {
  justify-content: flex-end;
}

.message-avatar {
  margin-right: 10px;
}

.message-content {
  border-radius: 16px;
  padding: 10px;
  max-width: 60%;
  word-wrap: break-word;
}

.user {
  background-color: #f1f1f1;
  margin-right: auto;
  color: #333;
}

.me {
  background-color: #1a73e8;
  margin-left: auto;
  color: white;
}

.input-section {
  padding-top: 20px;
}

.input-options {
  font-size: 14px;
  color: #888;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.input-row {
  margin-bottom: 20px;
}

.chat-input {
  width: 100%;
}

.el-button {
  width: 70px; /* 调整按钮的宽度 */
  height: 40px;
  padding: 10px; /* 可以根据需要调整内边距 */
}
.send-button-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.file-option {
  cursor: pointer;
  margin-left: 15px;
}

.input-row {
  padding: 0 20px;
}

.chat-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
}

.emotionItem{
  width:10%;
  font-size:20px;
  text-align:center;
}
/*包含以下四种的链接*/
.emotionItem {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emotionItem:active {
  text-decoration: none;
}
</style>
<!--<template>
  <div class="chat_container">
    <div class="chat-wrapper">
      &lt;!&ndash; 左侧好友列表 &ndash;&gt;
      <el-row class="friend-list">
        <el-col :span="5" class="friend-list-col">
          <div class="friend-list-scroll">
            <el-row
                v-for="item in friendList"
                :key="item.username"
                class="friend-item"
                @click="selectFriend(item)"
                :class="{ active: activeFriend.username === item.username }"
            >
              <el-col :span="6">
                <el-avatar
                    src="https://dkd-ynga.oss-cn-hangzhou.aliyuncs.com/Rlib.png"
                    :size="30"
                    class="friend-avatar"
                />
              </el-col>
              <el-col :span="18" class="friend-info">
                <div class="friend-name">{{ item.username }}</div>
                <div class="friend-message ellipsis">{{ item.text }}</div>
                <div class="friend-date">{{ item.date }}</div>
              </el-col>
            </el-row>
          </div>
        </el-col>

        &lt;!&ndash; 右侧聊天区域 &ndash;&gt;
        <el-col :span="19" class="chat-col">
          <div class="chat-header">
            <el-row class="chat-header-row">
              <div class="chat-header-name">{{ activeFriend.username }}</div>
            </el-row>
          </div>

          <div class="message-container">
            <el-row
                v-for="message in messages"
                :key="message.id"
                :class="{'left-message': message.role === 'user', 'right-message': message.role === 'me'}"
            >
              &lt;!&ndash; 用户消息 &ndash;&gt;
              <el-row class="message-row left">
                <el-avatar v-if="message.role === 'user'" src="https://dkd-ynga.oss-cn-hangzhou.aliyuncs.com/Rlib.png" :size="35" class="message-avatar" />
                <p v-if="message.role === 'user'" class="message-content user">{{ message.content }}</p>
              </el-row>

              &lt;!&ndash; 当前用户消息 &ndash;&gt;
              <el-row class="message-row right">
                <p v-if="message.role === 'me'" class="message-content me">{{ message.content }}</p>
                <el-avatar v-if="message.role === 'me'" src="https://dkd-ynga.oss-cn-hangzhou.aliyuncs.com/Rlib.png" :size="35" class="message-avatar" />
              </el-row>
            </el-row>
          </div>

          &lt;!&ndash; 输入框和功能按钮 &ndash;&gt;
          <div class="input-section">
            <el-row class="input-header">
              <div class="input-options">
                <span>😊</span>
                <span class="file-option">📁</span>
              </div>
            </el-row>
            <el-row class="input-row">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 30 }"
                  placeholder="请输入消息..."
                  class="chat-input"
                  v-model="newMessage"
                  @keyup.enter.native="sendMessage"
              />
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { socket } from "@/components/Utils/websocket";

export default {
  data() {
    return {
      loading: true,
      websocketCount: -1,
      queryCondition: {
        toId: 2,
        text: "你好",
        chatType: 1,
        isAdmin: false,
      },
      messages: [
        {
          id: 1,
          content: "你好！这个是聊天内容测试，看看如何显示。",
          role: "user",
        },
        {
          id: 2,
          content: "你好！这是我回复的内容，看看如何展示。",
          role: "me",
        },
      ],
      friendList: [
        {
          username: "王二离",
          text: "最后一条聊天记录：你好",
          date: "2024-3-1",
        },
        {
          username: "礼喆",
          text: "最后一条聊天记录：你好",
          date: "2024-12-24",
        },
      ],
      activeFriend: {},
      newMessage: '',
    };
  },
  methods: {
    init() {
      this.queryCondition.type = "message";
      socket.sendMsg(JSON.stringify(this.queryCondition));
    },
    websocketOnMessage(event) {
      this.websocketCount += 1;
      if (this.websocketCount === 0) {
        this.init();
      }
      let info = event.data;
      this.messages.push(info);
      if (info.type === "PONG") {
        socket.websocketState = true;
      } else if (info.type === "message") {
        this.loading = true;
        this.$nextTick(() => {
          this.consumeMessage(info);
        });
      } else if (info.type === "error") {
        console.log("错误");
        this.loading = false;
      }
    },
    consumeMessage(info) {
      console.log(info);
    },
    selectFriend(friend) {
      this.activeFriend = friend;
      this.loadMessages(friend.username);
    },
    loadMessages(username) {
      // 根据好友的用户名加载相应的聊天记录
      console.log("加载与 " + username + " 的聊天记录");
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({ content: this.newMessage, role: "me" });
        this.newMessage = '';
      }
    },
  },
};
</script>

<style lang="less" scoped>
.chat_container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  height: 85vh;
}

.chat-wrapper {
  display: flex;
  width: 80%;
  height: 80%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.friend-list-col {
  background-color: #f4f4f4;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.friend-list-scroll {
  max-height: 100%;
  overflow-y: auto;
}

.friend-item {
  display: flex;
  padding: 8px 0;
  cursor: pointer;
  transition: background 0.3s;
}

.friend-item:hover,
.friend-item.active {
  background-color: #e0f7fa;
}

.friend-avatar {
  border-radius: 50%;
}

.friend-info {
  margin-left: 10px;
  flex: 1;
}

.friend-name {
  font-weight: bold;
}

.friend-message {
  font-size: 12px;
  color: #777;
}

.friend-date {
  font-size: 10px;
  color: #bbb;
}

.chat-col {
  background-color: #fff;
  padding: 20px;
  flex: 1;
}

.chat-header {
  background-color: #e88a00;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  color: #fff;
}

.message-container {
  max-height: 60%;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 15px;
}

.message-row {
  display: flex;
  margin-bottom: 8px;
}

.message-avatar {
  border-radius: 50%;
  margin: 0 10px;
}

.message-content {
  padding: 10px;
  border-radius: 12px;
  max-width: 75%;
  word-wrap: break-word;
}

.user {
  background-color: #e0f7fa;
}

.me {
  background-color: #c8e6c9;
  margin-left: auto;
}

.input-section {
  background-color: #f9f9f9;
  padding: 0px 15px;
  border-top: 1px solid #ddd;
}

.input-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 20px;
}

.input-options {
  color: #888;
}

.file-option {
  cursor: pointer;
  margin-left: 15px;
}

.input-row {
  padding: 0 20px;
}

.chat-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
}
</style>-->
